<template>
  <div class="navigator-page">
    <!-- 公共页面头部组件 -->
    <PageHeader
      title="百宝箱"
      :item-count="getItemCount()"
      :item-unit="getItemUnit()"
      description="作品展示与优质资源的集合"
    />

    <!-- 标签导航 -->
    <TabNavigation :tabs="tabs" :active-tab="activeTab" @change="activeTab = $event" />

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 个人作品 -->
      <section v-if="activeTab === 'projects'" class="content-section">
        <div class="projects-grid">
          <ProjectCard
            v-for="project in projectList"
            :key="project.id"
            :project="project"
            @click="openProjectModal"
          />
        </div>
      </section>

      <!-- 优秀站点 -->
      <section v-else-if="activeTab === 'sites'" class="content-section">
        <div v-for="category in siteCategories" :key="category.name" class="site-category">
          <h2 class="category-title">
            <i :class="category.icon"></i>
            <span>{{ category.name }}</span>
          </h2>
          <div class="sites-grid">
            <SiteCard v-for="site in category.items" :key="site.name" :site="site" />
          </div>
        </div>
      </section>

      <!-- 友情链接 -->
      <section v-else-if="activeTab === 'friends'" class="content-section">
        <div class="friends-grid">
          <FriendCard
            v-for="(friend, index) in friendLinks"
            :key="index"
            :friend="friend"
            @apply="showApplyModal = true"
          />
        </div>
      </section>
    </div>

    <!-- 项目详情弹窗 -->
    <ProjectModal :show="showProjectModal" :project="selectedProject" @close="closeProjectModal" />

    <!-- 申请友链弹窗 -->
    <ApplyFriendModal
      :show="showApplyModal"
      @close="showApplyModal = false"
      @submit="handleApplySubmit"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import PageHeader from '@/components/PageHeader.vue'
import TabNavigation from './components/TabNavigation.vue'
import ProjectCard from './components/ProjectCard.vue'
import ProjectModal from './components/ProjectModal.vue'
import SiteCard from './components/SiteCard.vue'
import FriendCard from './components/FriendCard.vue'
import ApplyFriendModal from './components/ApplyFriendModal.vue'

// 定义 emits，避免 Vue 警告
defineEmits(['subscribe'])

// 标签页配置
const tabs = [
  { id: 'projects', name: '个人作品', icon: 'ri-code-box-line' },
  { id: 'sites', name: '优秀站点', icon: 'ri-global-line' },
  { id: 'friends', name: '友情链接', icon: 'ri-link' },
]

const activeTab = ref('projects')

// 项目详情弹窗
const showProjectModal = ref(false)
const selectedProject = ref(null)

// 申请友链弹窗
const showApplyModal = ref(false)

// 个人项目列表
const projectList = ref([
  {
    id: 1,
    name: '个人博客系统',
    shortDesc: '基于Vue3开发的个人博客前端',
    description:
      '一个现代化的个人博客系统，支持文章发布、评论系统、用户管理等功能。采用前后端分离架构，前端使用Vue3+Vite构建，后端使用Node.js和MongoDB。系统支持Markdown编辑、代码高亮、文章分类标签、搜索功能等。',
    cover: 'https://picsum.photos/id/1/800/600',
    github: 'https://github.com/username/blog',
    gitee: 'https://gitee.com/username/blog',
    demo: 'https://blog-demo.example.com',
    tags: ['Vue3', '博客', '前端'],
    technologies: ['Vue3', 'Vite', 'SCSS', 'Pinia', 'Vue Router', 'Node.js', 'MongoDB'],
    features: [
      '响应式设计，适配各种设备屏幕',
      '文章发布与管理系统',
      '用户评论与回复功能',
      '黑暗模式支持',
      '自定义主题设置',
      'Markdown编辑器集成',
    ],
  },
  {
    id: 2,
    name: 'Todo 清单应用',
    shortDesc: '基于Vue的todo应用，支持任务管理',
    description:
      '一个简洁高效的待办事项管理应用，支持任务创建、编辑、分类和优先级设置。包含数据统计和任务完成率分析功能。',
    cover: 'https://picsum.photos/id/2/800/600',
    github: 'https://github.com/username/todo-app',
    demo: 'https://todo-demo.example.com',
    tags: ['Vue', 'Todo', '工具'],
    technologies: ['Vue', 'Vuex', 'LocalStorage', 'Chart.js'],
    features: [
      '任务创建与编辑',
      '标签与分类管理',
      '任务优先级设置',
      '截止日期提醒',
      '数据统计与分析',
    ],
  },
  {
    id: 3,
    name: '在线音乐播放器',
    shortDesc: '基于Web Audio API的在线音乐播放器',
    description:
      '一个功能丰富的在线音乐播放器，支持播放控制、播放列表管理、歌词显示等功能。使用Web Audio API实现音频可视化效果。',
    cover: 'https://picsum.photos/id/3/800/600',
    github: 'https://github.com/username/music-player',
    gitee: 'https://gitee.com/username/music-player',
    demo: 'https://music-player-demo.example.com',
    tags: ['JavaScript', '音乐', 'Web Audio'],
    technologies: ['JavaScript', 'Web Audio API', 'HTML5', 'CSS3'],
    features: [
      '音乐播放与控制',
      '播放列表管理',
      '音频可视化效果',
      '歌词同步显示',
      '自定义音效设置',
    ],
  },
  {
    id: 4,
    name: '天气预报应用',
    shortDesc: '实时天气查询与预报应用',
    description:
      '一个基于地理位置的天气预报应用，提供实时天气信息、未来7天预报、空气质量指数等数据。支持全球主要城市查询和自动定位功能。',
    cover: 'https://picsum.photos/id/4/800/600',
    github: 'https://github.com/username/weather-app',
    tags: ['React', '天气', 'API'],
    technologies: ['React', 'Weather API', 'Geolocation API', 'Chart.js'],
    features: [
      '实时天气查询',
      '未来7天天气预报',
      '空气质量指数显示',
      '地理位置自动定位',
      '多城市管理',
    ],
  },
])

// 站点分类列表
const siteCategories = ref([
  {
    name: '前端开发',
    icon: 'ri-code-s-slash-line',
    items: [
      {
        name: 'MDN Web Docs',
        icon: 'ri-firefox-line',
        url: 'https://developer.mozilla.org/',
        description: 'Web技术权威文档',
      },
      {
        name: 'Vue.js',
        icon: 'ri-vuejs-line',
        url: 'https://vuejs.org/',
        description: '渐进式JavaScript框架',
      },
      {
        name: 'React',
        icon: 'ri-reactjs-line',
        url: 'https://reactjs.org/',
        description: '用于构建用户界面的JavaScript库',
      },
      {
        name: 'CSS Tricks',
        icon: 'ri-css3-line',
        url: 'https://css-tricks.com/',
        description: 'CSS技巧和教程',
      },
    ],
  },
  {
    name: '设计资源',
    icon: 'ri-palette-line',
    items: [
      {
        name: 'Dribbble',
        icon: 'ri-dribbble-line',
        url: 'https://dribbble.com/',
        description: '设计作品集与灵感',
      },
      {
        name: 'Figma',
        icon: 'ri-shape-line',
        url: 'https://www.figma.com/',
        description: '在线协作设计工具',
      },
      {
        name: 'Unsplash',
        icon: 'ri-image-line',
        url: 'https://unsplash.com/',
        description: '免费高质量图片',
      },
      {
        name: 'Coolors',
        icon: 'ri-contrast-drop-line',
        url: 'https://coolors.co/',
        description: '配色方案生成器',
      },
    ],
  },
  {
    name: '实用工具',
    icon: 'ri-tools-line',
    items: [
      {
        name: 'JSON Formatter',
        icon: 'ri-braces-line',
        url: 'https://jsonformatter.curiousconcept.com/',
        description: 'JSON格式化与验证',
      },
      {
        name: 'Regex101',
        icon: 'ri-text',
        url: 'https://regex101.com/',
        description: '正则表达式测试',
      },
      {
        name: 'Can I Use',
        icon: 'ri-question-line',
        url: 'https://caniuse.com/',
        description: '浏览器特性兼容性查询',
      },
      {
        name: 'Carbon',
        icon: 'ri-code-box-line',
        url: 'https://carbon.now.sh/',
        description: '创建漂亮的代码截图',
      },
    ],
  },
])

// 友链相关数据
const friendLinks = ref([
  {
    isApply: true,
  },
  {
    name: '张三的博客',
    url: 'https://example1.com',
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    description: '一个分享前端技术的博客',
  },
  {
    name: '李四的空间',
    url: 'https://example2.com',
    avatar: 'https://randomuser.me/api/portraits/women/2.jpg',
    description: '记录生活，分享技术心得',
  },
  {
    name: '王五的技术站',
    url: 'https://example3.com',
    avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
    description: '全栈开发者的日常',
  },
  {
    name: '赵六的笔记',
    url: 'https://example4.com',
    avatar: 'https://randomuser.me/api/portraits/women/4.jpg',
    description: '一枚产品经理的自留地',
  },
])

// 统计数据计算
const getItemCount = () => {
  if (activeTab.value === 'projects') {
    return projectList.value.length
  } else if (activeTab.value === 'sites') {
    return siteCategories.value.reduce((total, category) => total + category.items.length, 0)
  } else if (activeTab.value === 'friends') {
    return friendLinks.value.filter((friend) => !friend.isApply).length
  }
  return 0
}

const getItemUnit = () => {
  if (activeTab.value === 'projects') {
    return '个项目'
  } else if (activeTab.value === 'sites') {
    return '个站点'
  } else if (activeTab.value === 'friends') {
    return '个友链'
  }
  return '条'
}

// 方法定义
const openProjectModal = (project) => {
  selectedProject.value = project
  showProjectModal.value = true
}

const closeProjectModal = () => {
  showProjectModal.value = false
  selectedProject.value = null
}

const handleApplySubmit = (formData) => {
  console.log('提交友链申请:', formData)
  // 这里可以添加实际的提交逻辑，如API请求等
  alert('申请已提交，请等待审核！')
}

// 清理函数：确保恢复body滚动
const cleanup = () => {
  document.body.style.overflow = ''
}

// 组件卸载前清理
onBeforeUnmount(() => {
  cleanup()
})
</script>

<style lang="scss" scoped>
.navigator-page {
  padding: 40px 0 60px;
  min-height: calc(100vh - 200px);

  .content-wrapper {
    .content-section {
      animation: fadeIn 0.5s ease;
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 24px;
    }

    .site-category {
      margin-bottom: 48px;

      &:last-child {
        margin-bottom: 0;
      }

      .category-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 2px solid var(--border-lighter);

        i {
          color: var(--color-primary);
          font-size: 28px;
        }
      }

      .sites-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
      }
    }

    .friends-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .navigator-page {
    padding: 24px 0 40px;

    .page-header {
      margin-bottom: 32px;

      .page-title {
        font-size: 32px;
      }

      .page-desc {
        font-size: 16px;
      }
    }

    .content-wrapper {
      .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .site-category {
        margin-bottom: 32px;

        .category-title {
          font-size: 20px;
          margin-bottom: 20px;
        }

        .sites-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
      }

      .friends-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
  }
}
</style>
